<template>
	<el-row class="panel">

		<el-col :span="35" class="panel-top">

			<el-col class="img-pare"  :span="24">
        <img src="../assets/logo.png" alt="" class="wc-logos">
				<el-tooltip class="item tip-logout" effect="dark" content="退出" placement="bottom" style="padding:0px;">
					<span class="logout" @click="logout">退出登录</span>

				</el-tooltip>
			</el-col>
		</el-col>
		<el-col :span="24" class="panel-center">

			<aside style="width:230px;">


				<el-menu style="border-top: 1px solid #475669;" :default-active="currentPath" class="el-menu-vertical-demo" @open="handleopen"
					@close="handleclose" @select="handleselect" theme="dark" unique-opened router>
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">
							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
							<el-menu-item v-for="child in item.children" :index="child.path" @click="menuAdd(child.name,child.path)">{{child.name}}

							</el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
					</template>
				</el-menu>
			</aside>

			<section class="panel-c-c">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="panel-nav-pare">
                        <div class="menu-left">


                        </div>
						<el-breadcrumb separator="/" class="bread-icon" >
							<el-breadcrumb-item :to="{ path: '/constructor' }">首页</el-breadcrumb-item>
							<el-breadcrumb-item v-if="currentPathNameParent!=''">{{currentPathNameParent}}</el-breadcrumb-item>
							<el-breadcrumb-item v-if="currentPathName!=''">{{currentPathName}}</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" style="background-color:#fff;box-sizing: border-box;">
							<router-view></router-view>
					</el-col>
				</div>
			</section>

		</el-col>
	</el-row>
</template>

<script>
  import req from '../util/request.js'
  export default {
    data() {
      return {
		  currentPath: '/constructor',
		  currentPathName:'组织架构',
		  fromPath:"/",
		  fromPathName:"组织架构",
		  currentPathNameParent:'人员管理',
		  paths:[],
		  menuPare:null,
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        }
      }
    },
	watch: {
		'$route' (to, from) {//监听路由改变

			this.currentPath=to.path;
			this.currentPathName=to.name;
			this.fromPath=from.path;
			this.fromPathName=from.name;
			this.currentPathNameParent=to.matched[0].name;
		}
	},
	created(){

	},
    mounted(){

        this.menuPare=document.querySelector(".menu-left");


    },
    methods: {
        onSubmit() {
            console.log('submit!');
        },
        handleopen(){
            //console.log('handleopen');
        },
        handleclose(){
            //console.log('handleclose');
        },
          handleselect:function(a,b){


          },

			//退出登录
			logout:function(){
				var _this=this;
        _this.$router.replace('/login');


			},
			menuAdd(name,path){
			    var vm=this,id=path.substring(1),
			        styleSheet=[
                  'display:-webkit-box;',
                  'padding:0px 6px 5px 6px;',
                  'margin:0 6px 0 0;',
                  'background:#FFF;',
                  'border:#efefef 1px solid'
                ].join(''),
              styleSpan=[
                  'display:block;',
                  'color:#08c;',
                  'text-decoration:none;',
                  'margin-right:6px;',
              ].join('');
			    if(path!=this.currentPath && !vm.$("#"+id)){
                   var nav=document.createElement("div");
                   nav.setAttribute("style",styleSheet);
                   nav.innerHTML=[
                        "<a href='#"+path+"' style='"+styleSpan+"'>"+name+"</a>",
                        "<span class='el-icon-delete' id='"+id+"' style='font-size:16px;color:#999;'></span>"
                    ].join('');
                    this.menuPare.appendChild(nav);
                    vm.$("#"+id).addEventListener("click",function(e){
                        vm.cParent(e);
                    })
			    }

			},
        cParent(e){
            this.menuPare.removeChild(e.target.parentNode);
        },
      $(id){
         return  document.querySelector(id)
      },
      heatBeat(waitSecond, fn, backFn) {
            var wait = waitSecond;

            //设置秒数(单位秒)
            var i = 0,
                ind = '',
                timer = function () {
                    var r = wait - i;
                    if (r == 0) {
                        clearInterval(ind);
                        backFn && backFn();
                    } else {
                        fn && fn(r);
                        i++;
                    }
                };

            ind = setInterval(timer, 1000);
      }
    }
  }
</script>

<style scoped>
   body{
     overflow-x:hidden;
   }
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .5s
	}

	.fade-enter,
	.fade-leave-active {
		opacity: 0
	}

	.panel {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		font-size:16px;
		overflow:hidden;
	}
   .panel-img{
     padding-top:10px;
     height: 60px;
     line-height: 60px;
     background: #1F2D3D;
   }
	.panel-top {
		height: 60px;
    padding-top:10px;
    padding-left:10px;
		line-height: 60px;
		background: #1F2D3D;
		color: #c0ccda;
	}

	.panel-center {
		background: #324057;
		position: absolute;
		top: 60px;
		bottom: 0px;
		overflow: hidden;
	}

	.panel-c-c {
		background: #f1f2f7;
		position: absolute;
		right: 0px;
		top: 0px;
		bottom: 0px;
		left: 230px;
		overflow-y: scroll;
		padding: 20px;
	}

	.logout {
    display:block;
		width: 80px;
		height: 50px;
    color:#FFF;
    font-size:12px;
	}

	.wc-logos{
   display:block;
		width: 120px;

	}

	.tip-logout {
		float: right;
		margin-right: 20px;
		padding-top: 5px;
	}

	.tip-logout i {
		cursor: pointer;
	}



	.menu-left{
	    display:-webkit-box;
	    -webkit-box-flex:1;
	    -webkit-box-pack:start;
	    margin-top:-10px;
	    margin-bottom:10px;
      height:35px;
      line-height:35px;
	}

	.panel-nav-pare{
	  display:-webkit-box;
	  -webkit-box-pack:end;
	}
</style>
